<template>
    <div id="hotel">
        <div class="row">
            <div class="col-md-12">
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-gift"></i>酒店预定查询</div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse" data-original-title="" title=""></a>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <!-- BEGIN FORM-->
                        <form action="#" class="form-horizontal">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">通行证号</label>
                                            <div class="col-md-9">
                                                <passport-select ref="passportSelect" @PassportSelectChanged="onPassportSelectChanged"></passport-select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">预定状态</label>
                                            <div class="col-md-9">
                                                <el-select v-model="condition.States" multiple clearable placeholder="请选择酒店预定状态" style="width:100%">
                                                    <el-option v-for="item of words.states" :key="item.code" :label="item.text" :value="item.code"></el-option>
                                                </el-select>                                    
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">房间类型</label>
                                            <div class="col-md-9">
                                                <el-select v-model="condition.HotelTypes" multiple clearable placeholder="请选择酒店房间类型" style="width:100%">
                                                    <el-option v-for="(item, index) of hotelConfigs" :key="index" :label="item.name" :value="item.type"></el-option>
                                                </el-select>                                    
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">预定日期</label>
                                            <div class="col-md-9">
                                                <el-date-picker v-model="condition.ReserveDate" value-format="yyyy-MM-dd" type="date" style="width: 100%;" placeholder="选择预定日期日期"> </el-date-picker>
                                            </div>
                                        </div> 
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-12 pull-right">
                                        <div style="float:right;">
                                            <button type="button" class="btn green" @click="dialogVisible=true">酒店预定统计</button>
                                            <button type="button" class="btn green" @click="exportHotels()">导出预定列表</button>
                                            <button type="button" class="btn green" @click="query()">查询</button>
                                            <button type="button" class="btn default" @click="condition={}">清空条件</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!-- END FORM-->
                    </div>
                </div>
            </div>
        </div>        
        <div class="row">
            <div class="col-md-12">
                <el-table :data="hotels" size="small" border style="width: 100%">
                    <el-table-column sortable align="center" prop="HotelId" label="编号" width="80"></el-table-column>
                    <el-table-column sortable align="center" prop="State" label="状态" width="80">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.State == -1" type="info">已删除</el-tag>
                            <el-tag v-if="scope.row.State == 0">未激活</el-tag>
                            <el-tag v-if="scope.row.State == 1" type="success">已激活</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="RoomType" label="房间类型" width="200">
                        <template slot-scope="scope">
                            <span>{{ typeFormat(scope.row.RoomType) }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column align="center" prop="CheckinDate" label="入住日期" width="200">
                        <template slot-scope="scope">
                            <span>{{ scope.row.CheckinDate.substr(0, 10) }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column align="center" prop="CheckoutDate" label="退房日期" width="200">
                        <template slot-scope="scope">
                            <span>{{ scope.row.CheckoutDate.substr(0, 10) }}</span>
                        </template>  
                    </el-table-column>
                    <el-table-column align="center" label="入住人" width="300">
                        <template slot-scope="scope">
                            <div v-for="(guest, index) in scope.row.HotelGuests" style="display: inline;">
                                <user-detail :user="guest.Passport.User"></user-detail>
                                <span v-if="index < scope.row.HotelGuests.length-1">, </span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="预定人" width="120">
                        <template slot-scope="scope">
                            <user-detail :user="scope.row.Account.User"></user-detail>
                        </template>  
                    </el-table-column>
                    <el-table-column align="center" label="团队名称" width="180">
                        <template slot-scope="scope">
                            {{ scope.row.Account.User.Orgnization }}
                        </template>  
                    </el-table-column> 
                    <el-table-column align="center" label="预定时间" width="200">
                        <template slot-scope="scope">
                            <span>{{ scope.row.CreateTime | time }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column fixed="right" align="center" label="操作" width="100" v-if="authorize(['ROOT'])">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" v-if="scope.row.State != -1" @click="remove(scope.row)">删除</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pageCount"></el-pagination>
            </div>
        </div>    

        <div>
            <el-dialog title="预定数量统计" size="small" :visible.sync="dialogVisible">
                <el-table :data="quantities">
                    <el-table-column property="Name" label="房间类型" width="200"></el-table-column>
                    <el-table-column property="ReserveDate" label="预定日期" width="200">
                        <template slot-scope="scope">
                            <span>{{ scope.row.ReserveDate.substr(0, 10) }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column property="ReservedCount" label="预定数量"></el-table-column>
                    <el-table-column property="RemainCount" label="剩余数量"></el-table-column>
                </el-table>
            </el-dialog>
        </div>
    </div>
</template>

<script>

import UserDetail from 'views/user/user_detail.vue';
import PassportSelect from 'components/passport_select.vue';
import {DeepClone, ShowSuccess, TimeFormat} from 'web/utils';

export default {
    components: {
        UserDetail,
        PassportSelect
    },
    filters: {
        time: TimeFormat
    },
    data() {
        return {
            hotels: [],
            hotelConfigs: [],
            pageCount: 0,
            pageSize: 10,
            words: {
                states: [{ text: '已删除', code: -1 }, 
                         { text: '未激活', code: 0 }, 
                         { text: '已激活', code: 1 }]
            },
            condition: { },
            dialogVisible: false,
            quantities: []
        }
    },
    mounted() {

        // 加载酒店配置
        this.$ConfigService.getConfigByCode('HOTEL')
            .then(ret => {
                this.hotelConfigs = JSON.parse(ret.ConfigValue);
            })

        this.query(null);
        
        this.$HotelService.QueryQuantity()
            .then(ret => { 
                let quantity = [];
                for(let row of ret) {
                    let roomType = this.hotelConfigs.find(o => o.type == row.RoomType);
                    if (roomType) {
                        row.Name = roomType.name;
                        row.Quantity = roomType.quantity;
                        row.RemainCount = row.Quantity - row.ReservedCount;
                        quantity.push(row);
                    }
                }
                this.quantities = quantity; 
            });
    },
    methods: {

        typeFormat(type) {
            let roomType = this.hotelConfigs.find(o => o.type == type);
            return roomType ? `${roomType.name} (入住${roomType.occupancy}人)` : type;
        },

        formatLocation(country, province) {
            return LocationStringFormat(country, province);
        },

        onPassportSelectChanged(userIds) {
            this.condition.UserIds = userIds;
        },

        // 处理页面索引变化消息
        handleCurrentChange(val) {
            this.$HotelService.QueryHotels(this.condition, val, this.pageSize)
                .then(ret => {
                    this.hotels = ret;
                });            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.query(this.condition);
        },

        // 条件查询
        query() {
            Promise.all([
                this.$HotelService.QueryHotelsCount(this.condition),
                this.$HotelService.QueryHotels(this.condition, 1, this.pageSize)
            ]).then(ret => {
                this.pageCount = ret[0];
                this.hotels = ret[1];
            });
        },   

        exportHotels() {
            this.query();            
            this.$HotelService.Export(this.condition);
        }
    }
}
</script>

<style>

</style>
